<template>
  <div class="picker-container">
    <van-cell
      :title="title"
      :border="border"
      :title-width="titleWidth"
      :required="required"
      :value-class="valueClass"
    >
      <picker
        mode="multiSelector"
        @change="bindMultiPickerChange"
        @columnchange="bindMultiPickerColumnChange"
        @cancel="bindMultiPickerCancel"
        :value="indexArray"
        :range="dataArray"
        ref="others"
      >
        <slot name="others">
          <view class="picker-value"> {{dataText}} </view>
        </slot>
      </picker>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      required: true,
      default: '字段名称'
    },
    // 选项数组
    data: {
      required: true,
      type: Object
    },
    // 默认选项
    defaultActive: {
      type: String,
      default: ''
    },
    // 分隔符
    splitChar: {
      type: String,
      default: '-'
    },
    // 显示层级
    showLevel: false,
    titleWidth: {
      type: String
    },
    valueClass: {
      type: String
    },
    required: Boolean,
    border: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      title: '',
      checkedKey: [0, 2],
      dataArray: [],
      indexArray: []
    }
  },
  computed: {
    dataText () {
      let checked = this.setReturnData()
      let temp = checked.map(item => {
        return item.data
      })
      let level = this.showLevel
      if (typeof level === 'number') {
        return temp[level]
      }
      return temp.join(this.splitChar)
    }
  },
  mounted () {
    // let sourceData = []
    // let continent = Object.keys(this.data)
    // sourceData.push(continent)
    let checkedKey = this.getValueFullIndex(this.defaultActive)
    this.indexArray = checkedKey.index
    this.dataArray = checkedKey.data

    // let tempIndex = []
    // for (var i = 0; i < sourceData.length; i++) {
    //   let cindex = 0
    //   if (checkedKey.length > 0) {
    //     cindex = checkedKey.shift()
    //   }
    //   console.log(cindex)
    //   tempIndex.push(cindex)
    // }
    // console.log(tempIndex)

    // this.indexArray = tempIndex
    // this.dataArray = sourceData
    //
    this.title = this.label
  },

  onLoad (option) {
    console.log('_____________onLoad')
  },
  created () {
    console.log('_____________created')
  },

  methods: {
    notice () {
      this.$emit('change', this.setReturnData())
    },
    getValueFullIndex (value) {
      let index = [0, 0]
      let countries = []
      let continent = Object.keys(this.data)
      if (!value) {
        let kname = continent[0]
        countries = this.data[kname]
        return {
          index: index,
          data: [continent, countries]
        }
      }
      for (var i = 0; i < continent.length; i++) {
        let kname = continent[i]
        let c = this.data[kname]
        if (i === 0) {
          countries = c
        }
        let n = c.indexOf(value)
        if (n !== -1) {
          index = [i, n]
          countries = c
          break
        }
      }
      return {
        index: index,
        data: [continent, countries]
      }
    },
    setReturnData () {
      let checked = []
      for (let i = 0; i < this.indexArray.length; i++) {
        let column = i
        if (this.dataArray[column]) {
          let index = this.indexArray[column]
          checked.push({
            index: index,
            data: this.dataArray[column][index]
          })
        }
      }
      return checked
    },
    loadItemData (index) {
      let continent = Object.keys(this.data)
      let key = continent[index]
      return this.data[key]
    },
    getItemData (index) {
      let continent = Object.keys(this.data)
      return this.data[continent[index]]
    },
    bindMultiPickerColumnChange (e) {
      const { column, value } = e.mp.detail
      this.$set(this.indexArray, column, value)
      //
      if (column === 0) {
        this.$set(this.dataArray, column + 1, this.loadItemData(value))
        this.$set(this.indexArray, column + 1, 0)
        this.$set(this.indexArray, column, value)
      }
    },
    bindMultiPickerChange (e) {
      this.indexArray = e.mp.detail.value
      this.notice()
    },
    bindMultiPickerCancel (e) {
      this.notice()
    }
  }
}
</script>

<style lang="less">
.picker-container {
}
</style>